<template>

  <div class="smartlockerdetails">

    <!--    上-->
    <div class="top">
      <van-icon class="leftjiantou" size="20px" @click="fanhui" name="arrow-left"/>
      <p class="zi1">智能柜详情</p>
    </div>

    <!--    中-->
    <div class="middle" v-for="item in SmartLockerDetails" :key="item.id">
      <!--      柜机状况-->
      <div class="guijistatus">
        <p class="zi2">柜机状况</p>
      </div>

      <div class="xinxi">
        <div class="xinxi1">
          <p class="z1">柜机状态</p>
          <p class="z3">
            {{
              item.machineStatus == 0 ? '代取件' : (item.machineStatus == 1 ? '已取件' : (item.machineStatus == 2 ? '滞留件' : (item.machineStatus == 3 ? '已撤回' : (item.machineStatus == 4 ? '已超时' : '已完结'))))
            }}
          </p>
        </div>
        <div class="xinxi2">
          <p class="z2">可用箱格</p>
          <p class="z4">{{ item.id }}/24个</p>
        </div>
      </div>

    </div>

    <!--    下-->
    <div class="under" v-for="item in SmartLockerDetails" :key="item.id">
      <!--      柜机信息-->
      <div class="guijistatus">
        <p class="zi2">柜机信息</p>
      </div>

      <div class="under1">
        <div class="under2">
          <p class="q1">柜机编号</p>
          <p class="q2">{{ item.machineCode }}</p>
        </div>
        <div class="under3">
          <p class="q3">柜机地址</p>
          <p class="q4">{{ item.location }}{{ item.address }}</p>
        </div>
      </div>

      <div class="under4">
        <template>
          <div class="box">
            <!-- 地图组件 -->
            <el-amap
                vid="amapContainer"
                :zoom="zoom"
                :events="events"
                class="amapClass"
            ></el-amap>
          </div>
        </template>
      </div>
    </div>
  </div>

</template>





<script>import
{ findcabinetmachine, getaddress } from '@/api/cabinetmachine/CabinetMachine';
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  name: "gaode_ditu_amap",
  data() {
    return {
      query: {
        id: null,
      },
      SmartLockerDetails: [],
      id: null,
      map: null, // 地图实例存储变量
      zoom: 10, // 地图缩放比例
      events: {}, // 地图事件
      x: null,
      y: null,
      j: [],
      list:{},
    };
  },
  methods: {
    /**
     * 查询地址并初始化地图
     * 该方法通过查询参数获取地址，解析响应数据，并使用数据初始化地图
     */
    findaddress() {
      // 调用 getaddress 方法查询地址信息
      return getaddress(this.query).then(res => {
        // 检查响应数据的有效性
        if (res.data && res.data.data) {
          // 将响应数据的 values 转换为数组，并赋值给 this.j
          this.j = Object.values(res.data.data);
          // 将数组的第一个元素赋值给 this.x
          this.x = this.j[0];
          // 将数组的第二个元素赋值给 this.y
          this.y = this.j[1];
          // 在控制台输出 this.x 的值
          console.log("x", this.x);
          // 在控制台输出 this.y 的值
          console.log("y", this.y);
          // 初始化地图
          this.initMap();
        } else {
          // 如果响应数据无效，在控制台输出错误信息
          console.error("Invalid response data:", res);
        }
      }).catch(error => {
        // 捕获查询地址过程中的错误，并在控制台输出错误信息
        console.error("Error fetching address:", error);
      });
    },
    findSmartLockerDetails() {
      findcabinetmachine(this.query).then(res => {
        this.SmartLockerDetails = res.data.data;
        console.log("柜机数据:", this.SmartLockerDetails);
      }).catch(error => {
        console.error("Error fetching SmartLockerDetails:", error);
      });
    },
    initMap() {
      if (this.x !== null && this.y !== null) {
        lazyAMapApiLoaderInstance.load().then(() => {
          this.map = new AMap.Map("amapContainer", {
            center: new AMap.LngLat(this.x, this.y),
            zoom: this.zoom,
          });

          var marker = new AMap.Marker({
            map: this.map,
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [this.x, this.y],
          });

          marker.setMap(this.map);
        });
      } else {
        console.error("x and y are not set correctly.");
      }
    },
    fanhui() {
      this.$router.push({ path: '/smartlockersnearby/SmartlockersNearby' });
    },
  },
  created() {
    this.query = this.$route.query;
    console.log(this.query);
    this.findaddress();
    this.findSmartLockerDetails();
  },
  mounted() {
    // 确保在异步请求完成后初始化地图
    this.findaddress().then(() => {
      // 如果 x 和 y 已经设置，则初始化地图
      if (this.x !== null && this.y !== null) {
        this.initMap();
      }
    }).catch(error => {
      console.error("Error initializing map:", error);
    });
  },
};
</script>




<style scoped>

.box {
  width: 90%;
  height: 90%;
  box-sizing: border-box;
//padding: 60px; //background-color: #ced;
}

/* 指定地图的宽高 */
.amapClass {
  width: 370px;
  height: 250px;
}

.smartlockerdetails {
  background-color: #f5f5f5;
}

.top {
  //border: 1px solid red;
  width: 100%;
  height: 50px;
  background-color: white;
}

/* 顶部左边箭头 */
.leftjiantou {
  float: left;
  margin-top: 17px;
  margin-left: 10px;
}

.middle {
  width: 95%;
  height: 200px;
  //border: 1px solid red;
  margin: 10px;
  background-color: white;
}

.guijistatus {
  width: 95%;
  height: 80px;
  border-bottom: 1px solid #f5f5f5;
//border: 1px solid red; margin-left: 10px;
}

.zi2 {
  float: left;
  font-family: 黑体;
  font-weight: bold;
  margin-left: 10px;
}

.xinxi {
  width: 95%;
  height: 110px;
//border: 1px solid red; margin-left: 10px; margin-top: 5px;
}

.xinxi1 {
  width: 100%;
  height: 30px;
//border: 1px solid red;
}

.xinxi2 {
  width: 100%;
  height: 30px;
//border: 1px solid red; margin-top: 5px;

}

.z1 {
//border: 1px solid blue; float: left; margin-top: 3px; margin-left: 8px;
}

.z2 {
//border: 1px solid blue; float: left; margin-top: 3px; margin-left: -65px;
}

.z3 {
//border: 1px solid blue; float: right; margin-top: 3px; margin-right: 5px;
}

.z4 {
//border: 1px solid blue; float: right; margin-top: 3px; margin-right: -47px;
}

.under {
  width: 95%;
  height: 500px;
  //border: 1px solid blue;
  margin-left: 10px;
  margin-top: 10px;
  background-color: white;
}

.under1 {
//border: 1px solid red; width: 95%; height: 100px; margin-left: 10px;
}

.under2 {
//border: 1px solid blue; width: 100%; height: 30px; margin-top: 0px;
}

.under3 {
  //border: 1px solid blue;
  width: 100%;
  height: 90px;
  margin-top: 10px;
}

.under4 {
  //border: 1px solid blue;
  width: 95%;
  height: 250px;
  margin-top: 50px;
  margin-left: 10px;
}

.q1 {
  float: left;
  margin-top: 5px;
  margin-left: 10px;
}

.q2 {
  float: right;
  margin-top: 5px;
}

.q3 {
  float: left;
  margin-top: -2px;
  margin-left: -65px;
//border: 1px solid red; width: 70px; text-align: left;
}

.q4 {
  float: right;
  margin-top: -2px;
//border: 1px solid red; width: 300px; text-align: right;
}
</style>